﻿@page "/slider"
@using System.Collections
<RadzenExample Name="Slider">
<div class="row">
    <div class="col-xl-6">
        <h3>Slider from 0 to 100</h3>
        <RadzenSlider @bind-Value=@value TValue="int" Min="0" Max="100" Change=@(args => OnChange(args, "Slider from 0 to 100")) />
        <h3 style="margin-top: 2rem">Slider with Step 10</h3>
        <RadzenSlider @bind-Value=@valueWithStep TValue="int" Step="10" Change=@(args => OnChange(args, "Slider with Step 10")) />
        <h3 style="margin-top: 2rem">Range Slider</h3>
        <RadzenSlider Range="true" @bind-Value=@values TValue="IEnumerable<int>" Change=@(args => OnChange(args, "Range Slider")) />
    </div>
    <div class="col-xl-6">
        <EventConsole @ref=@console />
    </div>
</div>
</RadzenExample>

@code {
    IEnumerable<int> values = new int[] { 14, 78 };
    int value = 67;
    int valueWithStep = 30;

    EventConsole console;

    void OnChange(dynamic value, string name)
    {
        var str = value is IEnumerable ? string.Join(", ", value) : value;
        console.Log($"{name} value changed to {str}");
    }
}